<template>
  <el-container>
    <PublicHeader style="box-shadow: 0 1px 10px 0 #dfdfdf;">
      <template slot="left" style="text-align: left;">
        <div style="margin-right: 15px; display: inline-block; padding: 10px; cursor:pointer;" @click="drawer = true">
          <i class="el-icon-s-operation"></i>
        </div>
        <el-breadcrumb separator-class="el-icon-arrow-right" style="display: inline-block">
          <el-breadcrumb-item :to="{ path: '/courseList' }">我的课堂</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/courseList/courseDetail'}">课程内容</el-breadcrumb-item>
          <el-breadcrumb-item>作业详情</el-breadcrumb-item>
        </el-breadcrumb>

        <el-drawer
          :visible.sync="drawer"
          :direction="'ltr'"
          size="315px">
          <template slot="title">
            <div style="width: 96px">
              <img src="/static/logo/logo_blue.png" alt="logo" height="24px">
            </div>
          </template>
          <el-menu
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose">
            <el-menu-item style="width: 100%" v-for="(item, index) in menus" :key="index" @click="toNav(item.route)">
              <span slot="title">{{ item.name }}</span>
            </el-menu-item>
          </el-menu>
        </el-drawer>
      </template>
      <template slot="right">
        <HeaderRight></HeaderRight>
      </template>
    </PublicHeader>
    <el-main>
      <div class="cmps-homework-review">
        <el-tabs v-model="activeNav">
          <el-tab-pane label="详情" name="first">详情</el-tab-pane>
          <el-tab-pane label="批阅" name="second">
            <div class="header">
              <div class="header_title">{{ task.title }}</div>
            </div>
            <div class="top">
              <ul class="top_l">
                <li class="frist">截至：{{ task.endTime }}</li>
                <li>
                  <span>个人作业</span>
                </li>
                <li>{{ task.totalScore }} 分</li>
              </ul>
              <div class="top_r"></div>
            </div>
            <div class="xian"></div>
            <div class="flex-between main">
              <div class="title_list">
                <el-button round size="small">全部</el-button>
                <el-button round size="small">未批</el-button>
                <el-button round size="small">已批</el-button>
                <el-button round size="small">未交</el-button>
              </div>
              <div class="search_box"></div>
            </div>

            <el-table
              ref="multipleTable"
              :data="checkStudentTable"
              tooltip-effect="dark"
              style="width: 100%">
              <el-table-column
                type="selection">
              </el-table-column>
              <el-table-column
                prop="name"
                label="姓名">
              </el-table-column>
              <el-table-column
                prop="jobNumber"
                label="学号">
              </el-table-column>
              <el-table-column
                prop="submitTime"
                label="提交时间">
              </el-table-column>
              <el-table-column
                label="成绩">
                <template slot-scope="scope">{{ scope.row.score === null ? '未批' : scope.row.score }}</template>
              </el-table-column>
              <el-table-column
                label="作业内容">
                <template slot-scope="scope">{{ scope.row.content === null ? '未交' : scope.row.content }}</template>
              </el-table-column>
              <el-table-column
                label="操作"
                show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-button type="primary" round @click="giveScore(scope.row.studentId)">批阅</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-main>
    <el-footer></el-footer>


    <el-dialog title="批阅" :visible.sync="checkFormVisible">
      <el-form :model="checkForm" ref="checkForm" :rules="checkFormRules">
        <el-form-item label="成绩" label-width="80px" prop="score">
          <el-input v-model="checkForm.score" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetSubmitTask">取 消</el-button>
        <el-button type="primary" @click="submitCheckTask">确 定</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import PublicHeader from "../../components/PublicHeader";
import HeaderRight from "../../components/HeaderRight";
import {mymessage} from "../../tools/mymessage";

export default {
  name: "CheckTask",
  components: {HeaderRight, PublicHeader},
  data() {
    return {
      drawer: false,
      menus: [
        {
          name: '我的课堂',
          route: '/courseList'
        },
        {
          name: '备课区',
          route: '/lessonPreparation'
        },
        {
          name: '论文管理',
          route: '/thesisDefense'
        }
      ],
      activeNav: 'second',
      checkStudentTable: [
        {
          studentId: -1,
          content: null,
          jobNumber: "",
          name: "",
          score: null,
          submitTime: null,
          totalScore: ""
        }
      ],
      task: {
        courseId: -1,
        createTime: "",
        details: "",
        endTime: "",
        id: "",
        label: "",
        startTime: "",
        status: -1,
        step: -1,
        title: "",
        totalScore: -1
      },
      checkFormVisible: false,
      checkForm: {
        score: ''
      },
      checkFormRules: {
        score: [
          {required: true, message: '请输入分数', trigger: 'blur'}
        ]
      },
      studentId: -1
    }
  },
  methods: {
    init() {
      console.log("taskId", this.$store.getters.taskId);
      this.getRequest('/checkTask/getTaskList/' + this.$store.getters.taskId).then(resp => {
        console.log('taskResp', resp);
        if (resp.code === 200) {
          this.checkStudentTable = resp.data
        }
      })
      this.getRequest('/task/getTaskInfo/' + this.$store.getters.taskId).then(resp => {
        console.log("TaskInfo", resp);
        if (resp.code === 200) {
          this.task = resp.data
        }
      })
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    toNav(nav) {
      this.$router.push(nav)
    },
    submitCheckTask() {
      this.$refs['checkForm'].validate((valid) => {
        if (valid) {
          this.getRequest('/checkTask/giveScore/' + this.$store.getters.taskId + '/' + this.studentId + '/' + this.checkForm.score).then(resp => {
            if (resp.code === 200) {
              mymessage.success('批改成功')
              this.resetSubmitTask()
              this.init()
            } else {
              mymessage.info('批改失败')
            }
          })
        } else {
          return false
        }
      })
    },
    resetSubmitTask() {
      this.checkFormVisible = false
      this.$refs['checkForm'].resetFields()
    },
    giveScore(studentId) {
      this.studentId = studentId
      this.checkFormVisible = true
      this.submitCheckTask()
    }
  },
  created() {
    this.init()
  }
}
</script>

<style scoped>
.cmps-homework-review {
  min-width: 1024px;
  max-width: 1224px;
  margin: 0 auto;
  font-size: 12px;
  background-color: #fff;
}

.cmps-homework-review .header {
  display: flex;
  justify-content: space-between;
}

.cmps-homework-review .header .header_title {
  font-size: 20px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  text-align: left;
  color: #3c4043;
}

.cmps-homework-review .top {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  margin-bottom: 15px;
}

.cmps-homework-review .top .top_l {
  display: flex;
  flex-direction: row;
}

.cmps-homework-review .top .top_l .frist {
  background: #e8f0ff;
  color: #1967d2;
}

.cmps-homework-review .top .top_l li {
  display: inline-block;
  border-radius: 4px;
  background: #eee;
  text-align: left;
  color: #5f6368;
  padding: 5px 2px;
  margin-right: 10px;
  line-height: 10px;
  padding-left: 8px;
  padding-right: 8px;
}

.cmps-homework-review .top .top_r {
  display: block;
  flex-direction: row;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  text-align: left;
  color: #4285f4;
  line-height: 8px;
}

.cmps-homework-review .xian {
  width: 100%;
  height: 1px;
  border: 1px solid #e7ebf0;
}

.cmps-homework-review .main {
  padding: 24px 0;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/*.cmps-homework-review .main .title_list .el-button {
  width: 100px;
}

.cmps-homework-review .main .title_list .active-btn {
  background: #e8f0ff;
  color: #1967d2;
}*/
</style>
